<!-- 
    初始化vue实例 ===》 设置数据劫持(Object.defineProperty) ===》 模板编译(compile) ===》 渲染(render function) ===》 转化为虚拟DOM(Object) ===》 对比新旧虚拟DOM(patch、diff) ===》 更新视图(真实DOM)

    一、传入实例参数
      当我们开始写 Vue 项目时，首先初始化一个 Vue 实例，传入一个对象参数，参数中包括一下几个重要属性：
      {
        el: '#app',
        data: {},
        computed:{},
        ...
      }
        1) el：将渲染好的 DOM 挂载到页面中（可以传入一个 id，也可以传入一个 dom 节点）。
        2) data：页面所需要的数据（对象类型，至于为什么，会在数据劫持内容说明）。
        3) computed：计算属性，随着 data 中的数据变化，来更新页面关联的计算属性。
        4) methods：实例所用到的方法集合。
        5) watch: 监听属性。
        除此之外，还有一些生命周期钩子函数等其他内容。
    二、设置数据劫持
      1.数据劫持就是：当 Vue 实例上的 data 中的数据改变时，对应的视图所用到的 data 中数据也会在页面改变。所以我们需要给 data 中的所有数据设置一个监听器，监听 data 的改变和获取，一旦数据改变，监听器会触发，通知页面，要改变数据了。
      Object.defineProperty(obj, key, {
        get() {
          return value;
        },
        set: newValue => {
          console.log(---------------更新视图--------------------)
        }
      }  
      2.数据劫持是怎么实现的？
        就是给每一个 data绑定 Object.defineProperty()。对于 Object.defineProperty()的用法，详细看 MDN ，这也是 MVVM的核心实现 API，下面很多东西都是围绕着它转
    三、模板编译(compile)
      1.拿到传入 dom 对象和 data 数据了，如果将这些 data 渲染到 HTML 所对应的 {{student.age}}、vmodel="student.name" 等标签中，这个过程就是模板编译的过程，主要解析模板中的指令、class、style等等数据。 
        let fragment=this.nodefragment(this.el);//把当前节点放到内存中(因为频繁渲染造成回流和重绘)
        this.compile(fragment);// 把节点在内存中替换(编译模板,数据编译)
        this.el.appendChild(fragment); // 把内容塞回页面
      2.模板编译是怎么实现的？
        我们通过 el 拿到 dom 对象，然后将这个当前的 dom 节点放到内存中去，然后将数据和 dom 节点进行替换合并，然后再把结果塞回到页面中。
    四、虚拟DOM
      所谓虚拟DOM：其实就是一个JavaScript对象，说白了就是对真实DOM的一个描述对象，和真实DOM做一个映射。
      <div> <span>HelloWord</span> </div> // 真实DOM
      //以上的真实 DOM 被虚拟 DOM 表示如下：
      {
        children: [{…}] // 子元素
        domElement: div // 对应的真实 dom
        key: undefined // key 值
        props: {} // 标签对应的属性
        text: undefined // 文本内容
        type: "div" // 节点类型
        ...
      }
      一旦页面数据有变化，我们不直接操作更新真实 DOM，而是更新虚拟 DOM，又因为虚拟 DOM和真实DOM有映射关系，所有真实 DOM也被简洁更新，避免了回流和重绘造成性能上的损失。对于虚拟 DOM，主要核心涉及到 diff算法，新老虚拟结点如何检查差异的，然后又是如何进行更新的，后边会展开一点点讲。
    五、对比新老虚拟 DOM（patch)
      patch 主要是对更新后的新节点和更新前的节点进行比对，比对的核心算法就是 diff 算法，比如新节点的属性值不同，新节点又增加了一个子元素等变化，都需要通过这个过程，将最后新的虚拟 DOM 更新到视图上，呈现最新的变化，这个过程是一个核心部分，面试也是经常问到的。
    六、更新视图(update view)
      当第一次加载 Vue 实例的时候，我们将渲染好的数据挂载到页面中。实例挂载到真实dom 上后，我们更新数据时，新老节点对比完成，拿到对比的最新数据状态，然后更新到视图上去。


 -->